<template>
  <el-dialog
    v-model="visibility"
    title="修改时间段"
    width="60%"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      :label-width="config.form.label.width"
      status-icon>
      <el-row>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="开始天数"
            prop="startDay">
            <el-input-number
              v-model="formData.startDay"
              :min="0"
              placeholder="开始天数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="结束天数"
            prop="endDay">
            <el-input-number
              v-model="formData.endDay"
              :min="0"
              placeholder="结束天数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="比率"
            prop="ratio">
            <el-input-number
              :min="0"
              v-model="formData.ratio"
              placeholder="结束天数"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          @click="saveEvent">
          {{ config.button.text.confirm }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiBaseCompany from "@/api/modules/base-company"
import { useValidator } from "@/hooks/useValidator";

const visibility = ref(false)
const formData = ref({})
const formRef = ref()
const { required, validate, clearValidate } = useValidator()

const formRules = {
  startDay: [required("开始天数")],
  endDay: [required("结束天数")],
  ratio: [required("比率")],
}

const props = defineProps(["timeSlotRowData"])

const emits = defineEmits(["save"])

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    formData.value = { ...props.timeSlotRowData };
    setTimeout(() => {
      clearValidate(formRef.value);
    });
  }
}, { immediate: true });

const saveEvent = async () => {
  await validate(formRef.value)
  emits("confirm",formData.value)
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
  .el-row {
    align-items: flex-start;
  }
  @media screen and (max-width: 700px) {
    :deep(.el-form-item__label) {
      width: 120px !important;
    }
  }
</style>
